<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="<%=basePath%>static/plugins/ztree/css/metroStyle/metroStyle.css">
</head>
<body>
<ul id="treemenu" class="ztree"></ul>

<script src="<%=basePath%>static/plugins/ztree/js/jquery-1.4.4.min.js"></script>
<script src="<%=basePath%>static/plugins/ztree/js/jquery.ztree.all.js"></script>
<script>
    $(function () {

        var setting = {
            view: {
                addHoverDom: addHoverDom,
                removeHoverDom: removeHoverDom,
                selectedMulti: false
            },
            data: {
                key:{
                  name:'title'
                },
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pid",
                    rootPId: 0
                }
            },
            edit: {
                enable: true,
                showRemoveBtn: true
            },
            callback: {
                onRemove: zTreeOnRemove,
                onRename: zTreeOnRename
            }
        };
        $.ajax({
            url:'<%=basePath%>admin/menu/tree',
            dataType:'json',
            type:'post',
            success:function(data)
            {
                $.fn.zTree.init($("#treemenu"), setting, data);
            }

        })

    })

    function zTreeOnRemove(event, treeId, treeNode) {
        alert(treeNode.id);//id title pid
        return false;
    }
    function zTreeOnRename(event, treeId, treeNode, isCancel) {
        alert(treeNode.title);
    }

    var newCount = 1;
    function addHoverDom(treeId, treeNode) {
        var sObj = $("#" + treeNode.tId + "_span");
        if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
        var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
            + "' title='add node' onfocus='this.blur();'></span>";
        sObj.after(addStr);
        var btn = $("#addBtn_"+treeNode.tId);
        if (btn) btn.bind("click", function(){
            var zTree = $.fn.zTree.getZTreeObj("treemenu");
            var data={pid:treeNode.id,title:"new node"};
            $.ajax({
                url:'<%=basePath%>admin/menu/save',
                data:data,
                type:'POST',
                dataType:'json',
                success:function (d) {
                        console.log(d)
                    console.log(d.code)
                        console.log(d.object)
                        zTree.addNodes(treeNode, d.object);

                }
            })



            return false;
        });
    }
    function removeHoverDom(treeId, treeNode) {
        $("#addBtn_"+treeNode.tId).unbind().remove();
    };
</script>

</body>
</html>
